CSS Inheritance

ஒரு உறுப்பில் ஒரு பண்புக்கு (property) மதிப்பு குறிப்பிடப்படவில்லை என்றால் என்ன நடக்கும் என்பதைப் பற்றியது CSS பரம்பரை.

ஒரு பண்புக்கு மதிப்பு குறிப்பிடப்படவில்லை என்றால், அந்த மதிப்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறப்படலாம் அல்லது அதன் ஆரம்ப (இயல்புநிலை) மதிப்பாக அமைக்கப்படலாம்.

CSS பரம்பரைக்காக, பண்புகள் இரண்டு வகைகளாக வகைப்படுத்தப்படுகின்றன:

Inherited Properties (மரபுரிமை பெறும் பண்புகள்)

இயல்பாக, மரபுரிமைப் பண்புகள் பெற்றோர் உறுப்பின் கணக்கிடப்பட்ட மதிப்புக்கு அமைக்கப்படுகின்றன.

Non-Inherited Properties (மரபுரிமை பெறாத பண்புகள்)

மரபுரிமை பெறாத பண்புக்கு மதிப்பு அமைக்கப்படாவிட்டால், அந்த பண்பின் ஆரம்ப (இயல்புநிலை) மதிப்பாக அமைக்கப்படுகிறது.

Inherited Properties (மரபுரிமை பெறும் பண்புகள்)

இயல்பாக, மரபுரிமைப் பண்புகள் பெற்றோர் உறுப்பின் கணக்கிடப்பட்ட மதிப்புக்கு அமைக்கப்படுகின்றன.

color, font-family, font-size, line-height, மற்றும் text-align போன்ற உரையுடன் தொடர்புடைய பண்புகள் பொதுவாக மரபுரிமையாகப் பெறப்படுகின்றன. இது ஆவணம் முழுவதும் ஒத்திசைவான உரை பாணியை உறுதி செய்கிறது.

எடுத்துக்காட்டு

color மற்றும் font-size பண்புகள் மரபுரிமையாகப் பெறப்படுகின்றன:

<style>
p {
    color: blue;
    font-size: 20px;
}
</style>

<body>
<p>This is a paragraph with some <strong>important</strong> text.</p>
</body>

💡 Jassif Team விளக்கம்:

மேலே உள்ள எடுத்துக்காட்டில், உறுப்புக்குள் உள்ள உரை 20px மற்றும் நீல நிறத்தில் தோன்றும், ஏனெனில் உறுப்பு பெற்றோர் () உறுப்பிலிருந்து color மற்றும் font-size மதிப்புகளை மரபுரிமையாகப் பெறுகிறது.

மரபுரிமைப் பண்புகளின் எடுத்துக்காட்டுகள்	விளக்கம்
color	உரை நிறம்
font-family	எழுத்துரு குடும்பம்
font-size	எழுத்துரு அளவு
line-height	வரி உயரம்
text-align	உரை சீரமைப்பு
visibility	காட்சி நிலை

Non-Inherited Properties (மரபுரிமை பெறாத பண்புகள்)

மரபுரிமை பெறாத பண்புக்கு மதிப்பு அமைக்கப்படாவிட்டால், அந்த பண்பின் ஆரம்ப (இயல்புநிலை) மதிப்பாக அமைக்கப்படுகிறது.

border, background, margin, padding, width, மற்றும் height போன்ற பெட்டி மாதிரி அல்லது பக்கவடிவத்துடன் தொடர்புடைய பண்புகள் பொதுவாக மரபுரிமையாகப் பெறப்படுவதில்லை.

எடுத்துக்காட்டு

border பண்பு மரபுரிமையாகப் பெறப்படுவதில்லை:

<style>
p {
    border: 1px solid red;
}
</style>

<body>
<p>This is a paragraph with some <strong>important</strong> text.</p>
</body>

💡 Jassif Team விளக்கம்:

மேலே உள்ள எடுத்துக்காட்டில், உறுப்புக்குள் உள்ள உறுப்புக்கு கூடுதல் border இருக்காது (ஏனெனில் border-style இன் ஆரம்ப மதிப்பு none).

மரபுரிமை பெறாத பண்புகளின் எடுத்துக்காட்டுகள்	விளக்கம்
border	எல்லை
background	பின்னணி
margin	வெளிப்புற இடைவெளி
padding	உள்புற இடைவெளி
width	அகலம்
height	உயரம்

The inherit Keyword (inherit முக்கிய சொல்)

inherit முக்கிய சொல் மரபுரிமையை வெளிப்படையாகக் குறிப்பிட பயன்படுகிறது. இது மரபுரிமை மற்றும் மரபுரிமை அல்லாத பண்புகள் இரண்டிலும் செயல்படுகிறது.

எடுத்துக்காட்டு

inherit முக்கிய சொல்லைப் பயன்படுத்தி மரபுரிமையை வெளிப்படையாக அமைக்கவும்:

<style>
p {
    border: 1px solid red;
}

strong {
    border: inherit;
}
</style>

<body>
<p>This is a paragraph with some <strong>strong</strong> text.</p>
</body>

🚀 Jassif Team விளக்கம்:

மேலே உள்ள எடுத்துக்காட்டில், உறுப்புக்குள் உள்ள உறுப்புக்கு கூடுதல் border இருக்கும், ஏனெனில் border மதிப்பு inherit ஆக இருக்க வேண்டும் என்று வெளிப்படையாகக் குறிப்பிட inherit முக்கிய சொல்லைப் பயன்படுத்தியுள்ளோம்.

⚠️ முக்கிய குறிப்பு:

inherit மதிப்பைப் பயன்படுத்துவது நீங்கள் ஒரு குறிப்பிட்ட உறுப்புக்கு பெற்றோர் உறுப்பின் மதிப்பை வெளிப்படையாகப் பயன்படுத்த விரும்பும் போது பயனுள்ளதாக இருக்கும், குறிப்பாக மரபுரிமை பெறாத பண்புகளுக்கு.

நடைமுறை எடுத்துக்காட்டு

CSS பரம்பரை எவ்வாறு வேலை செய்கிறது என்பதைப் புரிந்துகொள்வதற்கான ஒரு நடைமுறை எடுத்துக்காட்டு:

<style>
body {
    font-family: 'Arial', sans-serif;
    color: #333;
    line-height: 1.6;
}

.container {
    border: 2px solid blue;
    padding: 20px;
    background-color: #f0f0f0;
}

.container p {
    /* color மற்றும் font-family ஆகியவை மரபுரிமையாகப் பெறப்படுகின்றன */
    font-size: 18px;
    /* border மற்றும் background ஆகியவை மரபுரிமையாகப் பெறப்படுவதில்லை */
    border: 1px solid green;
    background-color: white;
}

.container span {
    /* color, font-family, font-size ஆகியவை மரபுரிமையாகப் பெறப்படுகின்றன */
    /* border மற்றும் background ஆகியவை மரபுரிமையாகப் பெறப்படுவதில்லை */
    /* இந்த span க்கு border இருக்காது */
}

.container .special-span {
    /* வெளிப்படையாக inherit முக்கிய சொல்லைப் பயன்படுத்துதல் */
    border: inherit;
    background-color: inherit;
}
</style>

CSS Inheritance பயிற்சி

உங்கள் CSS பரம்பரை அறிவைச் சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

❓ பின்வரும் CSS பண்புகளில் எது மரபுரிமையாகப் பெறப்படும் பண்பு?

border

✗ தவறு! border என்பது மரபுரிமை பெறாத பண்பு, பெட்டி மாதிரி பண்பு

margin

✗ தவறு! margin என்பது மரபுரிமை பெறாத பண்பு, இடைவெளி பண்பு

background-color

✗ தவறு! background-color என்பது மரபுரிமை பெறாத பண்பு, பின்னணி பண்பு

font-size

✓ சரி! font-size என்பது மரபுரிமைப் பண்பு, இது உரையுடன் தொடர்புடைய பண்பு மற்றும் பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறப்படுகிறது

சுருக்கம்

மரபுரிமைப் பண்புகள் (color, font-size, text-align) பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறப்படுகின்றன

மரபுரிமை பெறாத பண்புகள் (border, margin, padding) பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறப்படுவதில்லை

inherit முக்கிய சொல்லைப் பயன்படுத்தி எந்தப் பண்புக்கும் வெளிப்படையாக மரபுரிமையைக் குறிப்பிடலாம்

பரம்பரை உரை பாணிகளை ஒத்திசைவாக வைத்திருக்க உதவுகிறது, இது CSS குறியீட்டைக் குறைக்கிறது

🎯 Jassif Team இறுதி உதவிக்குறிப்பு:

உங்கள் CSS வடிவமைப்புகளில் பரம்பரை எவ்வாறு வேலை செய்கிறது என்பதைப் புரிந்துகொள்வது அதிக திறமையான மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுத உதவும். உரை தொடர்பான பண்புகள் இயல்பாக மரபுரிமையாகப் பெறப்படுகின்றன என்பதை நினைவில் கொள்ளுங்கள், அதே நேரத்தில் பெட்டி மாதிரி பண்புகள் பெறுவதில்லை.